<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_元素类名操作</title>
		<!-- html:   h1    div  id="targetElment"
		                   四个按钮  id="addClassBtn"
						            id="removeClassBtn"
									id="hasClassBtn"
		                   div  id="resultArea"
		     css:       .bg(300*300  背景色 自定)
			            .bd(10像素实现边框  倒角：画圆)
		 -->
		 <!-- --------------------------------------------------- -->
		 <!-- 元素类名操作    针对css中类名，可以做添加、移除、切换和包含类名操作
		      addClass()             有参【1个参，多个参】
			                         功能：匹配元素集合中的所有元素添加一个类名或者多个类名
									 语法：addClass("类名")
									 语法：addClass("类名1 类名2")
			  removeClass()          有参【1个参，多个参】
			                         功能：匹配元素集合中的所有元素移除一个类名或者多个类名
			  toggleClass()          功能：如果元素有指定类名则移除，没有则添加
			  hasClass()             功能：检查匹配元素集合中是否存在指定类名，返回值bool.
		-->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			 .bg{
				 width: 300px;
				 height: 300px;
				 background: #55aaff;
			 }
			 .bd{
				 border: 10px solid #ff55ff;
				 border-radius: 50%;
			 }
		 </style>
	</head>
	<body>
		<!-- html结构  4个按钮 2个空间 -->
		<div id="targetElment"></div>
		<button id="addClassBtn">添加类名</button>
		<button id="removeClassBtn">移除类名</button>
		<button id="toggleClassBtn">切换类名</button>
		<button id="hasClassBtn">判断存在类名</button>
		<div id="resultArea"></div>
		<script>
			// 1.类名切换：css存在可用类名  
			// 点击添加类名  实现效果：300*300 红色背景色
			$("#addClassBtn").click(function(){
				$("#targetElment").addClass("bg bd");
				$("#resultArea").html("<h4>已经切换样式:.bg</h4>");
			});
			// 2.移除类名：   实现效果：   点击移除类名 实现 300*300 红色背景色
			$("#removeClassBtn").click(function(){
				$("#targetElment").removeClass("bd");
				$("#resultArea").html("<h4>已经移除样式:.bd</h4>");
			});
			// 3.切换类名：   实现效果：   点击移除类名 实现 300*300的圆边框 红色背景色
			// 4.样式全部移除 ，实现效果：实现300*300 红色背景色
			$("#toggleClassBtn").click(function(){
				// 存在bg 移除
				$("#targetElment").toggleClass("bg");
				$("#resultArea").html("<h4>已经切换样式:存在样式移除，不存在添加.bd</h4>");
			})
			// 检查类名是否存在:bg是否存在
			$("#hasClassBtn").click(function(){
				var hc=$("#targetElment").hasClass("bg");
				$("#resultArea").text("目标元素 bg 类名是否存在:"+hc);
			});
		</script>
	</body>
</html>